<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>薪资列表展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="Layuimini/lib/layui-v2.6.3/css/layui.css"  media="all">
    <link rel="stylesheet" href="Layuimini/css/public.css" media="all">

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" action="">

                <div class="layui-inline">
                    <label class="layui-form-label">起始日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date" id="statDate" lay-verify="date" placeholder="请选择起始时间" autocomplete="off" class="layui-input">
                    </div>

                </div>
            <div class="layui-inline" style="margin-left: -20px;">
                <label class="layui-form-label">结束日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" id="endDate" lay-verify="date" placeholder="请选择结束时间" autocomplete="off" class="layui-input">
                </div>
            </div>

            <button type="button" class="layui-btn layui-btn-primary" onclick="serachBtn()"
                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
            </button>

            <button type="button" class="layui-btn layui-btn-primary" onclick="resethBtn()">
                <i class="fa fa-refresh"></i> 重 置
            </button>
        </form>

        <div class="card-body" id="container">
            <div id="main" style="width: 1050px;height:380px;"></div>
        </div>



    </div>
</div>
<script  src="jQuery/jquery-2.1.1.min.js" th:src="@{LightYear/js/jquery.min.js}" charset="utf-8"></script>
<script src="Layuimini/lib/layui-v2.6.3/layui.js" th:src="@{Layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script src="Layuimini/echarts/echarts.min.js" th:src="@{Layuimini/echarts/echarts.min.js}" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#statDate',
            type: 'month'
        });
        laydate.render({
            elem: '#endDate',
            type: 'month'
        });


    });
    function resethBtn(){
        $("#statDate").val("");
        $("#endDate").val("");
       // serachBtn();
        window.location.reload();
    }


    var months =new Array();
    var incomes =new Array();
    var amounts =new Array();
    var begin  =$("#statDate").val();
    var end    =$("#endDate").val();

    showTable();


    function serachBtn(){
        $("#main").remove();
        $("#container").append('<div id="main" style="width: 1050px;height:380px;"></div>');
        months =[];
        incomes =[];
        amounts=[];
        showTable();

    }

    function showTable(){
        var begin  =$("#statDate").val();
        var end    =$("#endDate").val();
        $.ajax({
            url:"superSalary/getSalaryInfo",
            type:"GET",
            data:{"statDate":begin,"endDate":end,"company":''},
            success: function (result) {
              //  console.log(result.data.list)
                var allData = result.data.list;
                for (var i=0;i<allData.length;i++){
                    months.push(allData[i].month);
                    incomes.push(allData[i].income);
                    amounts.push(allData[i].amount);
                }

                //集合反转
                months.reverse();
                incomes.reverse();
                amounts.reverse();
                var myChart = echarts.init(document.getElementById('main'));

                option = {
                    color: ['#3398DB'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                            data:months,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '收入',
                            type: 'bar',
                            barWidth: '40%',
                            //data: [10, 52, 200, 334, 390, 330],
                            data:incomes,
                            label: {
                                show: true, // 开启显示
                                // rotate: 70, // 旋转70度
                                position: 'top', // 在上方显示
                                distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                                verticalAlign: 'middle',
                                textStyle: { // 数值样式
                                    color: 'black',
                                    fontSize: 12
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                        var colorList = ['#c23531','#2f4554', '#61a0a8', , '#91c7ae','#749f83', '#ca8622','#87CEFA'];
                                        //return colorList[params.dataIndex]
                                        return colorList[7]
                                    }
                                }
                            }
                        },
                        {
                            name: '支出',
                            type: 'bar',
                            barWidth: '40%',
                            // data: [20, 32, 180, 234, 250, 140],
                            data:amounts,
                            label: {
                                show: true, // 开启显示
                                // rotate: 70, // 旋转70度
                                position: 'top', // 在上方显示
                                distance: 20, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                                verticalAlign: 'middle',
                                textStyle: { // 数值样式
                                    color: 'black',
                                    fontSize: 12
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                        var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622','#FFB6C1'];
                                        return colorList[7]
                                    }
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);

            }
        })

    }

</script>


</body>
</html>